<template>
    <div>
        <el-row class="risk-order-top">
            <el-col :span="12" class="form-col col-box">
                <!-- 指令表单 -->
                <el-row class="form-content">
                    <!-- 买券还券 -->
                    <MarginTradingForm
                        :orderDirection="']'"
                        :key="renderCountKey"
                        :form="instInfo"
                        :tableSelectedStockInfo="tableSelectedStockInfo"
                        @getOrderForm="getOrderForm"
                        @getStockInfo="getStockInfo"
                        :refreshNumber="refreshNumber"
                    />
                </el-row>
                <!-- 操作按钮栏 -->
                <el-row class="form-operate">
                    <el-col :span="7">
                        <i style="font-size: 25px" name="entrySetting" class="el-icon-setting iconClass" @click="openEntryGroupDialog"></i>
                    </el-col>
                    <el-col :span="17" style="padding-left: 10px">
                        <el-button name="重置" size="mini" @click="handleClickButtonReset">重置</el-button>
                        <el-button name="试算" type="primary" size="mini" @click="handleTrialCalculate">试算</el-button>
                        <el-button name="下单" type="primary" size="mini" @click="handlePlaceOrder">下单</el-button>
                    </el-col>
                </el-row>
            </el-col>
            <!-- 持仓 -->
            <el-col :span="12" class="col-box">
                <el-tabs type="card" v-model="positionActivePane">
                    <el-tab-pane label="融券标的券持仓" name="1">
                        <RiskTable
                            class="position"
                            :msg="marginPositionListMsg"
                            @getList="queryMarginPositionList"
                            @handleFilter="handleFilterMarginPosition"
                            @handleSort="handleSortMarginPosition(arguments)"
                            @handleBtn="handleMarginPositionSelect"
                        ></RiskTable>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>

        <!-- 条目组设置 -->
        <EntryGroupSetting
            v-if="entryGroupDialog"
            :resourceCode="resourceCode"
            :transDialog="entryGroupDialog"
            @getEntryGroup="getEntryGroup"
            @closeEntryDialog="closeEntryDialog"
        />

        <!--处理下单后的弹窗-->
        <RiskOrderResultAfter
            v-if="orderCancelShow"
            :key="riskOrderResultAfterKey"
            :riskResultThresholdType="trailResultMsg.riskResult"
            :res="riskOrderResultTable"
            @riskResultContinue="riskResultContinue"
            @riskResultCancel="riskResultCancel"
        />
    </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import RiskTableLayout from '@/common/components/risk-table-layout.vue';
import EntryGroupSetting from '../components/entry-group-seting.vue';
import RiskTable from '@/common/components/risk-table.vue';
import MarginTradingForm from '../components/margin-trading-form.vue';
import RiskOrderResultAfter from '../components/risk-order-result-after.vue';
import MarginTradingOderClass from '../class/margin-trading-order-class';
import StatusTag from '@/pages/risk-measure/components/status-tag.vue';
import BranchTag from '@/pages/risk-measure/components/branch-tag.vue';
import TrailResult from '../components/trail-result.vue';

@Component({
    name: 'BuyAndReturnOrder',
    components: {
        RiskTableLayout,
        RiskTable,
        RiskOrderResultAfter,
        EntryGroupSetting,
        MarginTradingForm,
        StatusTag,
        BranchTag,
        TrailResult,
    },
})
// 买券还券下单tab
export default class BuyAndReturnOrder extends MarginTradingOderClass {
    @Prop() activePane: string;
    @Prop()
    detail: any;
    iconDom: any = null;
    isFirst: boolean = true;
    instInfo: any = {};

    @Watch('activePane', { immediate: true })
    async onWatchActivePane() {
        if (this.activePane === '6') {
            if (this.isFirst) {
                this.getUserSelectEntryGroupList();
                this.isFirst = false;
            }
        }
    }
    @Watch('instruction.fundCode', { immediate: true, deep: true })
    onWatchFundCode() {
        this.queryMarginPositionList(this.pages);
        // if (this.instruction.fundCode) {
        //     this.queryMarginPositionList(this.pages);
        // } else {
        //     this.marginPositionListMsg.returnData.data = [];
        //     this.marginPositionListMsg.returnData.total = 0;
        // }
    }

    // 获取要修改的指令信息
    @Watch('detail', { immediate: true, deep: true })
    onWatchDetail() {
        if (this.detail?.instNo && this.detail?.orderDirectionName == '买券还券') {
            let instruction: any = {};
            this.isUpdate = true;
            this.oldOuterOrderCode = this.detail.outerOrderCode;
            this.serialNo = this.detail.serialNo;
            for (const key in this.detail) {
                instruction[key] = this.detail[key];
            }
            instruction.businClass = this.detail.businessType;
            instruction.fundAccountCode = this.detail.groupCode;
            this.handleStockStatus(this.marginPositionListMsg.returnData.data, this.detail?.stockCode);
            // this.getUserSelectEntryGroupList();
            this.instruction = JSON.parse(JSON.stringify(instruction));
            this.instInfo = JSON.parse(JSON.stringify(instruction));
            this.renderCountKey++;
        } else {
            this.instInfo = {};
        }
    }

    mounted() {
        this.entryTypeArr = this.objToArr(this.Invest.entryType);
        this.ThresholdTypeArr = this.objToArr(this.Invest.ThresholdType);
    }

    // 获取子组件表单数据
    getOrderForm(data: any) {
        for (const key in data) {
            this.instruction[key] = data[key];
        }
    }

    // 获取子组件选择的证券信息
    getStockInfo(data: any) {
        this.tableSelectedStockInfo = data;
        // 设置表格中相应证券选中状态
        this.handleStockStatus(this.marginPositionListMsg.returnData.data, data?.stockCode);
    }

    /* ********************* 持仓相关start ******************** */

    // 选中融券标的券事件
    handleMarginPositionSelect(obj: any) {
        this.tableSelectedStockInfo = obj.row;
        this.handleStockStatus(this.marginPositionListMsg.returnData.data, this.tableSelectedStockInfo?.stockCode);
    }

    // 查询融券标的券持仓
    queryMarginPositionList(pages: any) {
        this.queryPositionList(pages, '3');
    }

    // 融券标的券持仓表格筛选
    handleFilterMarginPosition(filterList: any) {
        this.handleFilterPosition(filterList, '3');
    }

    // 融券标的券持仓表格排序
    handleSortMarginPosition(sort: any) {
        this.handleSortPosition(sort, '3');
    }

    /* ********************* 持仓相关end ******************** */

    /* ******************************* 试算、下单start *************************** */
    // 重置表单
    handleClickButtonReset() {
        super.handleClickButtonReset();
        this.handleStockStatus(this.marginPositionListMsg.returnData.data, this.tableSelectedStockInfo?.stockCode);
    }
    // 试算
    handleTrialCalculate() {
        this.refreshNumber++;
        setTimeout(() => {
            this.handleFormSubmit('1');
        }, 1000);
    }

    // 下单
    handlePlaceOrder() {
        this.refreshNumber++;
        setTimeout(() => {
            this.handleFormSubmit('2');
        }, 1000);
    }

    // 继续下达
    riskResultContinue() {
        super.riskResultContinue();
    }

    // 终止下达
    riskResultCancel() {
        super.riskResultCancel();
    }

    /* ******************************* 试算、下单end *************************** */

    /* ************************************ 条目组设置start ********************************** */
    openEntryGroupDialog() {
        this.openEntryGroupDialogs();
    }

    getEntryGroup(value: any) {
        this.getEntryGroups(value);
    }

    closeEntryDialog() {
        this.closeEntryDialogs();
    }

    /* ************************************ 条目组设置end ********************************** */
}
</script>
<style lang="scss" scoped>
@import '@/pages/risk-measure/style/measure';
@import '@/pages/risk-time/styles/risk-order';
</style>
<style lang="scss">
.messageStyle {
    background-color: #ecf9e3;
    border-color: #ecf9e3;
    font-size: 18px;
    .el-icon-success {
        color: #67c23a;
    }
}
</style>
